import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import config from '../../config';
import styles from './index.less';
import Viewer from 'react-viewer';

const businessCooperation = props => {
  const { form, dispatch } = props;
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0)
  const [showDetail, setShowDetail] = useState(false)
  const [advantageList, setAdvantageList] = useState([])
  const [directionList, setDirectionList] = useState([])
  const [tabKey, setTabKey] = useState('1')
  const [page, setPage] = useState({})
  const [imgVisiable, setImgVisiable] = useState(false)
  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    let w = e.target.innerWidth;
    setHeight(h);
    setWidth(w)
  };
  useEffect(() => {
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: props.id }
    }).then((res) => {
      let _advantageList = []
      let _directionList = []
      res?.data?.rows?.forEach(i => {
        if (i.categoryId == '1603944291762409473') {
          _advantageList.push(i)
        }
        if (i.categoryId == '1603944116654411777') {
          _directionList.push(i)
        }
      }) || []
      setAdvantageList(_advantageList)
      setDirectionList(_directionList)
    })
    dispatch({
      type: 'Public/getCategoryGet',
      payload: { id: props.id }
    }).then((res) => {
      setPage(res?.data || [])
    })
  }, [])
  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    let w = window.innerWidth;
    setHeight(h)
    setWidth(w)
    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);
    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  const list = tabKey === '1' ? directionList : tabKey === '2' ? advantageList : [];
  const banner = page?.categoryImg && JSON.parse(page?.categoryImg)
  return (
    <div className={styles.businessCooperation}>
      <div className={styles.banner}>
        <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%" />
        {
          ((width > 750 && !showDetail) || (width < 751 && !showDetail)) && <div className={styles.position}>
            <div className={styles.bannerText}>
              <span className={styles.textBold}>智能科技</span>
              <span className={styles.textBoldB}>读懂用户的心</span>
              <span className={styles.text}>Zhineng&nbsp;keji&nbsp;dudong &nbsp; yonghu&nbsp;d&nbsp;xin&nbsp;xinag&nbsp;asdjos<br />sjdijfnsadnfak&nbsp;sdfa&nbsp;sdoifiewjejhre<br />jsadifienrejjwkjr</span>
            </div>
          </div>
        }
      </div>
      <div className={styles.tabs}>
        {((width > 750 && !showDetail)) && <div className={styles.tab}>
          <div className={tabKey === '1' ? styles.tabItemChoose : styles.tabItem} style={{ marginRight: '100px' }} onClick={() => setTabKey('1')}>软件产品</div>
          <div className={tabKey === '2' ? styles.tabItemChoose : styles.tabItem} onClick={() => setTabKey('2')}>智能产品</div>
        </div>}
        {
          !showDetail ? <div className={styles.content}>
            <div className={styles.content_title}>{tabKey === '1' ? '软件产品' : tabKey === '2' ? '智能产品' : ''}</div>
            <div className={styles.content_desc} >{tabKey === '1' ? '软件产品描述' : tabKey === '2' ? '智能产品描述' : ''}</div>
            <div className={styles.content_show}>
              {
                list && list.length ? list.map((item, index) => {
                  const contentImg = item?.contentImg && JSON.parse(item?.contentImg)
                  return <div className={styles.content_show_item} key={index}>
                    <img className={styles.content_show_item_img} referrerpolicy="no-referrer" src={config.targetUrl + contentImg?.[0]?.path}></img>
                    <div className={styles.content_show_item_title}>{item?.contentTitle}</div>
                    <div className={styles.content_show_item_more} style={{ marginTop: '22px' }} onClick={() => {
                      setShowDetail(true)
                    }}>了解更多 →</div>
                  </div>
                }) : null
              }
            </div>
          </div> :
            <div className={styles.nextShowProduct}>
              <div className={styles.anchor}>
                <a href="#introduce" className={styles.anchorActive}>产品介绍</a>
                <a href="#advantage">应用场景</a>
                <a href="#scene">产品优势</a>
              </div>
              <div className={styles.goback}>
                首页 &gt;<span onClick={() => {
                  setShowDetail(false)
                }}>产品展示</span>  &gt; VR.全景网站
              </div>
              <div className={styles.container}>
                <div id="introduce" className={styles.introduce}>
                  <div className={styles.tipSmall}>产品介绍</div>
                  <div className={styles.title}>VR.全景网站</div>
                  <div className={styles.tip}>产品介绍</div>
                  <div className={styles.con}>VR全景适用各个各行业&nbsp;展馆场景博物馆/图书馆等场景&nbsp;房地产在线样板房720度看房&nbsp;教育教育机构课堂环境展示&nbsp;酒店酒店宾馆在线看房&nbsp;旅游旅游景点全景展示&nbsp;展馆场景博物馆/vr全景还适用于校园教育、科技展厅、景区景点、装饰设计、酒店等其他的行业。例如，它可以用在景区的景区导航，方便游客可以快速的到达下一个热门景点。博物馆中的3D展物，房屋的远程查看以及超市中的vr购物等。全景不仅只是视觉上的升级，他可以结合不同行业的应用需求来提供多样化的解决方案。...</div>
                </div>
                <div id="advantage" className={styles.advantage}>
                  <div className={styles.tipSmall}>产品优势</div>
                  <div className={styles.tip}>产品优势</div>
                  <div className={styles.ysCon}>
                    {
                      [1, 2, 3, 4, 5, 6].map((item) => {
                        return <div className={styles.item}>
                          <div className={styles.itemImg}>
                            <img
                              className={styles.img}
                              referrerpolicy="no-referrer"
                              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngca8243628abce41e9f6d1f932b489659f7e8578ae30c26cf0f105198025827b2"
                            />
                          </div>
                          <div className={styles.smallTitle}>提高宣传效率</div>
                          <div className={styles.desc} >
                            利用VR全景可以实现实物产品和环境的逼真化再现，让客户感觉到更直观和真实可靠</div>
                        </div>
                      })

                    }
                  </div>
                </div>
                <div id="scene" className={styles.scene}>
                  <div className={styles.tipSmall}>应用场景</div>
                  <div className={styles.tip}>应用场景</div>
                  <div className={styles.imgs}>
                    {[1, 2, 3].map(item => {
                      return (
                        <div className={styles.imgItem}>
                          <img
                            className={styles.item}
                            referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9e6291b1c6de12c333cb08043b82da6eb4f762da56d55ec89b3cff93ccbf8d19"
                            onClick={() => {
                              setImgVisiable(true)
                            }}
                          />
                          <span>xxx使用场景</span>
                        </div>

                      )
                    })}
                  </div>
                </div>
              </div>
            </div>
        }

      </div>
      <Viewer
        visible={imgVisiable}
        onClose={() => setImgVisiable(false)}
        images={[{ src: 'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9e6291b1c6de12c333cb08043b82da6eb4f762da56d55ec89b3cff93ccbf8d19', alt: '' }]}
      />
    </div >
  );
};

export default connect(({ }) => ({}))(businessCooperation);
